<template>
  <div class="todo-container">
    <div class="todo-header">
      <h3>待办事项</h3>
      <el-button type="primary" @click="showAddTodoDialog">添加待办</el-button>
    </div>

    <el-tabs v-model="activeTab" class="todo-tabs">
      <el-tab-pane label="待办" name="pending">
        <el-empty v-if="pendingTodos.length === 0" description="暂无待办事项" />
        <el-card v-for="todo in pendingTodos" :key="todo.id" class="todo-card">
          <div class="todo-item">
            <div class="todo-check">
              <el-checkbox @change="toggleTodo(todo)" />
            </div>
            <div class="todo-content">
              <div class="todo-title">{{ todo.title }}</div>
              <div class="todo-desc">{{ todo.description }}</div>
              <div class="todo-footer">
                <div class="todo-date">截止日期: {{ formatDate(todo.dueDate) }}</div>
                <div class="todo-actions">
                  <el-button type="primary" link @click="editTodo(todo)">编辑</el-button>
                  <el-button type="danger" link @click="deleteTodo(todo)">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="已完成" name="completed">
        <el-empty v-if="completedTodos.length === 0" description="暂无已完成事项" />
        <el-card v-for="todo in completedTodos" :key="todo.id" class="todo-card completed">
          <div class="todo-item">
            <div class="todo-check">
              <el-checkbox :modelValue="true" @change="toggleTodo(todo)" />
            </div>
            <div class="todo-content">
              <div class="todo-title">{{ todo.title }}</div>
              <div class="todo-desc">{{ todo.description }}</div>
              <div class="todo-footer">
                <div class="todo-date">完成时间: {{ formatDate(todo.completedAt) }}</div>
                <div class="todo-actions">
                  <el-button type="danger" link @click="deleteTodo(todo)">删除</el-button>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-tab-pane>
    </el-tabs>

    <el-dialog
      v-model="dialogVisible"
      :title="isEdit ? '编辑待办' : '添加待办'"
      width="40%"
    >
      <el-form :model="todoForm" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="todoForm.title" placeholder="请输入待办标题"></el-input>
        </el-form-item>
        <el-form-item label="截止日期">
          <el-date-picker
            v-model="todoForm.dueDate"
            type="date"
            placeholder="选择截止日期"
          />
        </el-form-item>
        <el-form-item label="优先级">
          <el-select v-model="todoForm.priority">
            <el-option label="低" value="low" />
            <el-option label="中" value="medium" />
            <el-option label="高" value="high" />
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            v-model="todoForm.description"
            type="textarea"
            placeholder="请输入待办描述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveTodo">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('pending')
const todos = ref([
  {
    id: 1,
    title: '完成项目方案',
    description: '准备下周项目方案文档',
    dueDate: new Date('2023-12-31'),
    priority: 'high',
    completed: false,
    completedAt: null
  },
  {
    id: 2,
    title: '团队会议',
    description: '与产品团队讨论新功能',
    dueDate: new Date('2023-12-25'),
    priority: 'medium',
    completed: false,
    completedAt: null
  },
  {
    id: 3,
    title: '学习Vue3',
    description: '阅读Vue3文档并完成练习',
    dueDate: new Date('2023-12-20'),
    priority: 'medium',
    completed: true,
    completedAt: new Date('2023-12-19')
  }
])

const dialogVisible = ref(false)
const isEdit = ref(false)
const todoForm = ref({
  id: '',
  title: '',
  description: '',
  dueDate: '',
  priority: 'medium',
  completed: false,
  completedAt: null
})

// 分类待办和已完成
const pendingTodos = computed(() => {
  return todos.value.filter(todo => !todo.completed)
    .sort((a, b) => new Date(a.dueDate) - new Date(b.dueDate))
})

const completedTodos = computed(() => {
  return todos.value.filter(todo => todo.completed)
    .sort((a, b) => new Date(b.completedAt) - new Date(a.completedAt))
})

const formatDate = (date) => {
  if (!date) return '未设置'
  return new Date(date).toLocaleDateString()
}

const showAddTodoDialog = () => {
  isEdit.value = false
  todoForm.value = {
    id: '',
    title: '',
    description: '',
    dueDate: new Date(),
    priority: 'medium',
    completed: false,
    completedAt: null
  }
  dialogVisible.value = true
}

const editTodo = (todo) => {
  isEdit.value = true
  todoForm.value = { ...todo }
  dialogVisible.value = true
}

const saveTodo = () => {
  if (!todoForm.value.title) {
    ElMessage.warning('请输入待办标题')
    return
  }
  
  if (isEdit.value) {
    const index = todos.value.findIndex(t => t.id === todoForm.value.id)
    todos.value[index] = { ...todoForm.value }
  } else {
    todos.value.push({
      ...todoForm.value,
      id: Date.now(),
      completed: false,
      completedAt: null
    })
  }
  
  dialogVisible.value = false
  ElMessage.success(isEdit.value ? '修改成功' : '添加成功')
}

const deleteTodo = (todo) => {
  todos.value = todos.value.filter(t => t.id !== todo.id)
  ElMessage.success('删除成功')
}

const toggleTodo = (todo) => {
  todo.completed = !todo.completed
  if (todo.completed) {
    todo.completedAt = new Date()
    ElMessage.success('恭喜完成任务！')
  } else {
    todo.completedAt = null
  }
}
</script>

<style scoped>
.todo-container {
  padding: 20px;
}

.todo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.todo-card {
  margin-bottom: 15px;
}

.todo-item {
  display: flex;
}

.todo-check {
  margin-right: 15px;
  display: flex;
  align-items: flex-start;
  padding-top: 5px;
}

.todo-content {
  flex: 1;
}

.todo-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.todo-desc {
  color: #666;
  margin-bottom: 10px;
}

.todo-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.todo-date {
  color: #999;
}

.completed .todo-title {
  text-decoration: line-through;
  color: #999;
}

.completed .todo-desc {
  text-decoration: line-through;
  color: #999;
}

.todo-tabs {
  margin-top: 20px;
}
</style> 